<template>
  <div>
    <div style="background-color: white;width: 80%;" class="shadow-div">
      <table   style="width: 93%;">
        <el-tag type="danger" size="large" style="margin-left: 20px;margin-top: 30px">{{form1.earNumber}}</el-tag>
        <el-button type="success" round style="margin-left: 30px;margin-top: 30px">
           <span v-if="form1.presence==1">在场</span>
           <span v-if="form1.presence==2">待入场</span>
           <span v-if="form1.presence==3">销售离场</span>
           <span v-if="form1.presence==4">死亡离场</span>
           <span v-if="form1.presence==5">淘汰已离场</span>
           <span v-if="form1.presence==6">挑拨离场</span>
           <span v-if="form1.presence==7">死羔未入场</span>
        </el-button>
        <el-button type="warning" plain style="margin-top: 30px">
          <span v-if="form1.reproductiveState==1">后备空怀</span>
          <span v-if="form1.reproductiveState==2">返情空怀</span>
          <span v-if="form1.reproductiveState==3">未孕空怀</span>
          <span v-if="form1.reproductiveState==4">流产空怀</span>
          <span v-if="form1.reproductiveState==5">空胎空怀</span>
          <span v-if="form1.reproductiveState==6">断奶空怀</span>
          <span v-if="form1.reproductiveState==7">妊娠</span>
          <span v-if="form1.reproductiveState==8">哺乳</span>
          &nbsp;{{form1.statusDays}}天&nbsp;
          <span v-if="form1.pregnancyTest==true">(已妊检)</span>
          <span v-if="form1.pregnancyTest==false">(未妊检)</span><br>
        </el-button><br><br>
        <span style="margin-left: 20px;color:blue;">{{form1.cottage}}-{{form1.field}}</span>
        <span style="margin-left: 20px;color:blue;">电子耳号:{{form1.electronicEarNumber}}</span><br><br>
        <table style="width: 100%;">
          <tr>
            <td> 
              <span style="margin-left: 20px">品种:
          <span v-if="form1.breed==1">杜泊</span>
          <span v-if="form1.breed==2">澳洲白</span>
          <span v-if="form1.breed==3">萨福克</span>
          <span v-if="form1.breed==4">杜湖</span>
          <span v-if="form1.breed==5">杜杜湖</span>
          <span v-if="form1.breed==6">萨杜湖</span>
          <span v-if="form1.breed==7">澳湖</span>
          <span v-if="form1.breed==8">湖羊</span>
          <span v-if="form1.breed==9">澳杜湖</span>
          </span>
      </td>
            <td>
              <span style="margin-left: 100px;">性别:
              <span v-if="form1.sex==1" >公</span>
              <span v-if="form1.sex==2">母</span>
            </span>
            </td>
            <td>
              <span style="margin-left: 100px;">父耳号:<el-tag type="success" >{{form1.fatherHorn}}</el-tag></span>
            </td>
            <td>
              <span style="margin-left: 100px;">母耳号:<el-tag type="primary" >{{form1.femaleHorn}}</el-tag></span>
            </td>
            <td>
              <span style="margin-left: 20px;">出生日期:{{form1.birthday.substring(0,10)}}</span>
            </td>
            <td>
              <span style="margin-left: 100px;">出生重:{{form1.birthWeight}}公斤</span>
            </td>
          </tr>
          <br>
          <tr>
            <td>
              <span style="margin-left: 20px;">出生场地:{{form1.placeBirth}}
              </span>
            </td>
            <td>
              <span style="margin-left: 100px;">断奶日龄:{{form1.weaningAge}}天
            </span>
            </td>
            <td>
              <span style="margin-left: 100px;">断奶重:{{form1.weaningWeight}}公斤
            </span>
            </td>
            <td>
              <span style="margin-left: 100px;">日龄:{{form1.ageDays}}
          </span>
            </td>
            <td>
              <span style="margin-left: 20px;">月龄:{{form1.ageMoon}}
          </span>
            </td>
            <td>
              <span style="margin-left: 100px;">同胎数:0
          </span><br><br>
            </td>
          </tr><br>
          <tr>
            <td>
              <span style="margin-left: 20px;">生产等级:
          <span  v-if="form1.productionGrade==1">未定级</span>
          <span  v-if="form1.productionGrade==2">后备级</span>
          <span  v-if="form1.productionGrade==3">核心级</span>
          <span  v-if="form1.productionGrade==4">生产级</span>
        </span>
            </td>
            <td>
              <span style="margin-left: 100px;">基因等级:
          <span  v-if="form1.geneClass==1">未定级</span>
          <span  v-if="form1.geneClass==2">后备级</span>
          <span  v-if="form1.geneClass==3">核心级</span>
          <span  v-if="form1.geneClass==4">生产级</span>
        </span>
            </td>
            <td>
              <span style="margin-left: 100px;">销售等级:
          <span v-if="form1.salesGrade==1">无</span>
          <span v-if="form1.salesGrade==2">未定级</span>
        </span>
            </td>
            <td>
              <span style="margin-left: 100px;">繁殖方式:
          <span  v-if="form1.reproductiveState==1">后备空怀</span>
          <span  v-if="form1.reproductiveState==2">返情空怀</span>
          <span  v-if="form1.reproductiveState==3">未孕空怀</span>
          <span  v-if="form1.reproductiveState==4">流产空怀</span>
          <span  v-if="form1.reproductiveState==5">空胎空怀</span>
          <span v-if="form1.reproductiveState==6">断奶空怀</span>
          <span  v-if="form1.reproductiveState==7">妊娠</span>
          <span  v-if="form1.reproductiveState==8">哺乳</span>
        </span>
            </td>
          </tr><br>
          <tr>
            <td>
              <span style="margin-left: 20px;">当前胎次:0
            </span>
            </td>
            <td>
              <span style="margin-left: 100px;">已产胎次:0
          </span>
            </td>
            <td>
              <span style="margin-left: 100px;">配种序号:1
          </span>
            </td>
          </tr>
          <br>
          <tr>
            <td>
              <span style="margin-left: 20px;">创建人:{{form1.createBy}}
          </span>
            </td>
            <td>
              <span style="margin-left: 100px;">修改人:{{form1.updateBy}}
          </span>
            </td>
            <td>
              <span style="margin-left: 100px;">创建时间:
          <span  v-if="form1.createDate==null">{{form1.createDate}}</span>
          <span  v-else="form1.createDate">{{form1.createDate.substr(0,19).replace("T"," ")}}</span>
        </span>
            </td>
            <td>
              <span style="margin-left: 300px;">修改时间:
          <span  v-if="form1.updateDate==null">{{form1.updateDate}}</span>
          <span  v-else="form1.updateDate">{{form1.updateDate.substr(0,19).replace("T"," ")}}</span>
        </span>
            </td>
          </tr>
        </table>
    </table>  
    </div><br>
    <div style="background-color: white;width: 80%;padding-top: 15px;padding-right: 90px;" class="shadow-div"  >
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="padding-top: 15px;padding-right: 90px;"  >
              <el-tab-pane label="系谱" name="first">   
                <Genealogy></Genealogy>
              </el-tab-pane>
              <el-tab-pane label="生产记录" name="second">
                <ProductionRecord></ProductionRecord>
              </el-tab-pane>
              <el-tab-pane label="转舍记录" name="third">
                  <ResellerRecord></ResellerRecord>
              </el-tab-pane>
              <el-tab-pane label="档案卡" name="fourth">
                  <FileCcard></FileCcard>
              </el-tab-pane>
    </el-tabs>
    </div>
  </div>
  </template>
  <script setup lang="ts">
  import axios from "axios";
  import {reactive,ref,onMounted} from "vue"
  import {useRoute} from "vue-router"
  import Cookies from 'cookies-ts'
  import type { TabsPaneContext } from 'element-plus'
  import ResellerRecord from './ResellerRecord.vue'
  import FileCcard from './FileCcard.vue'
  import ProductionRecord from './ProductionRecord.vue'
  import Genealogy from './Genealogy.vue'
  const cookie = new Cookies();
  const router=new useRouter()
  const route=new useRoute()
  const activeName = ref('first')
  
  //tab标签事件
  const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
  }
  //表单
  const form1=reactive({
    "id": 0,
    "visualEarSignal": "",
    "electronicEarNumber": "",
    "breed": 0,
    "sex": 0,
    "birthday": "",
    "ageDays": "",
    "ageMoon": "",
    "presence": 0,
    "growthStage": "",
    "sheepType": "",
    "cottage": "",
    "field": "",
    "reproductiveState": 0,
    "pregnancyTest": true,
    "statusDays": "",
    "productionGrade": 0,
    "salesGrade": 0,
    "geneClass": 0,
    "birthWeight": "",
    "weaningWeight": "",
    "weaningDate": "",
    "weaningAge": "",
    "fatherHorn": "",
    "femaleHorn": "",
    "earNumber": "",
    "placeBirth": "",
    "remark": "",
    "createBy": "",
    "createDate": "",
    "updateBy": "",
    "updateDate": "",
  })
  const Find=()=>{
    axios.get("MYroute/api/SheepFile/SheepFileConditionFinds?card="+cookie.get("earNumber")).then(res=>{
      console.log(res.data)
      form1.id=res.data.id;
      form1.ageDays=res.data.ageDays;
      form1.ageMoon=res.data.ageMoon;
      form1.birthWeight=res.data.birthWeight;
      form1.birthday=res.data.birthday;
      form1.breed=res.data.breed;
      form1.cottage=res.data.cottage;
      form1.createBy=res.data.createBy;
      form1.createDate=res.data.createDate;
      form1.earNumber=res.data.earNumber;
      form1.electronicEarNumber=res.data.electronicEarNumber;
      form1.fatherHorn=res.data.fatherHorn;
      form1.femaleHorn=res.data.femaleHorn;
      form1.field=res.data.field;
      form1.geneClass=res.data.geneClass;
      form1.growthStage=res.data.growthStage;
      form1.id=res.data.id;
      form1.placeBirth=res.data.placeBirth;
      form1.pregnancyTest=res.data.pregnancyTest;
      form1.presence=res.data.presence;
      form1.productionGrade=res.data.productionGrade;
      form1.remark=res.data.remark;
      form1.sex=res.data.sex;
      form1.sheepType=res.data.sheepType;
      form1.statusDays=res.data.statusDays;
      form1.updateBy=res.data.updateBy;
      form1.updateDate=res.data.updateDate;
      form1.visualEarSignal=res.data.visualEarSignal;
      form1.weaningAge=res.data.weaningAge;
      form1.weaningDate=res.data.weaningDate;
      form1.weaningWeight=res.data.weaningWeight;
      form1.reproductiveState=res.data.reproductiveState;
      form1.salesGrade=res.data.salesGrade;
    })
  }
  onMounted(()=>{
      Find()
  })
  </script>
  
  <style>
  .shadow-div {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置阴影样式 */
    border-radius: 10px;
    /* 其他样式 */
  }</style>